<template>
  <div class="main" v-loading="loading">
    <el-container style="height: 100%">
      <el-aside class="aside ele-scrollbar">
        <div class="search">
          <el-input
            placeholder="请输入搜索内容..."
            v-model="searchKey"
            class="input-with-select"
            @keyup.enter="searchJob"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchJob"
            ></el-button>
          </el-input>
        </div>
        <div class="jobs">
          <el-backtop target=".aside"></el-backtop>
          <el-badge
            :value="nums[index]"
            @click.native="selectJob(item)"
            class="item"
            v-for="(item, index) in arr"
            :key="index"
            style="padding: 5px 0px; width: 95%"
          >
            <el-card shadow="hover">
              <el-tooltip
                class="item"
                effect="dark"
                v-if="item.length > 24"
                :content="item"
                placement="top"
              >
                <span>{{ item.substring(0, 23) + "..." }}</span>
              </el-tooltip>
              <span v-if="item.length <= 24">{{ item }}</span>
            </el-card>
          </el-badge>
        </div>
      </el-aside>
      <el-main>
        <el-container>
          <el-header>
            <h1>{{ checkJob }}</h1>
          </el-header>
          <el-divider></el-divider>
          <el-main>
          
            <!-- 节点详情 -->
            <el-tabs
              tab-position="right"
              style="height: 500px"
              @tab-click="clickJob"
            >
              <el-tab-pane v-for="(item, i) in jobInfo.jobNodes" :key="i">
                <span slot="label"
                  ><el-tag>{{ item.entry.entryType }}</el-tag>
                  {{ item.nodeName }}</span
                >
                <el-card class="box-card">
                  <el-descriptions title="节点信息" border>
                    <el-descriptions-item :label="k" v-for="(v,k) in item.entry.detail" :key="k"
                      > 
                      <span v-if="!isShowDetail(item.entry)">
                        {{ v }}
                      </span>
                      <el-button v-if="isShowDetail(item.entry)" @click="showDetail(item.entry)">
                        查看详情
                      </el-button>
                      </el-descriptions-item
                    >
                  </el-descriptions>
                </el-card>
                <!-- 如果是TRANS 则查询ktr -->
                <!-- <div v-if="item.entry.entryType == 'TRANS'">
                  {{ item.entry.detail.节点文件名称 }}
                </div>
                <div v-if="test(item.entry.entryType)">
                  <codemirror
                    v-model="item.entry.detail.执行SQL"
                    :options="cmOption"
                  />
                </div> -->
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import "@/assets/css/udmp.css";
import "@/assets/css/scrollbar.css";
import { format } from "sql-formatter";
import dedent from "dedent";
import { codemirror } from "vue-codemirror";
import "codemirror/mode/sql/sql.js";
// 主题css
import "codemirror/theme/darcula.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// closebrackets
import "codemirror/addon/edit/closebrackets.js";

const axios = require("axios");
export default {
  data() {
    return {
      //数据加载蒙版
      loading: false,
      activeIndex: "index",
      searchKey: "",
      //job列表
      arr: [],
      //job内包含节点信息
      nums: [],
      //当前选择的job
      checkJob: {},
      //当前job的详细信息
      jobInfo: {},
      //sql展示配置
      cmOption: {
        tabSize: 4,
        direction: "ltr",
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: "text/x-sql",
        theme: "darcula",
        readOnly: true,
      },
    };
  },
  mounted() {
    this.getJobInfo();
  },
  methods: {
    searchJob() {
      console.log("搜索:" + this.searchKey);
      let _this = this;
      _this.loading = true;
      const key = _this.searchKey;
      axios
        .get("http://localhost:8888/monitor/udmp/searchByKey?key="+key)
        .then(function (response) {
          let r = response.data.data;
          _this.arr = r.jobs;
          _this.nums = r.nums;
          _this.loading = false;
        });
    },
    getJobInfo() {
      let _this = this;
      _this.loading = true;
      axios
        .get("http://localhost:8888/monitor/udmp/getKettleJobInfo")
        .then(function (response) {
          let r = response.data.data;
          _this.arr = r.jobs;
          _this.nums = r.nums;
          _this.loading = false;
        });
    },
    selectJob(item) {
      this.checkJob = item;
      //查询详细信息
      let _this = this;
      axios
        .get("http://localhost:8888/monitor/udmp/getJobInfoByName?name=" + item)
        .then(function (response) {
          let r = response.data.data;
          _this.jobInfo = JSON.parse(r);
          //设置节点信息
        });
    },
    clickJob(a, b, c) {},
    //检测是否为可展示信息
    isShowDetail(e) {
      let f = false;
      //如果是sql 且长度很长 则通过详情展示
      if(e.entryType.includes('SQL') && e.text.length() > 150){
        f = true;
      }
    },
  },
};
</script>
